<template>
  <div class="kecheng" v-loading="loading">
    <div class="detail_a flex">
      <p>正在学习</p>
      <p @click="jihuo()">激活课程</p>
    </div>
    <ul class="kechengList" v-if="array.length!=0">
      <li v-for="(list,index) in array" :key="index" @click="toDetail(list.id)">
        <img :src="list.photo" alt />
        <p>{{list.title}}</p>
      </li>
    </ul>
    <div v-else class="tip2">
      <img src="../../assets/none.png" alt />
    </div>
    <div class="modal_delate">
      <el-dialog :visible.sync="modelDelate" width="338px" title="输入激活码">
        <span class="delate_con">
          <input type="text" placeholder="请输入激活码" v-model="jihuoma" />
        </span>
        <span slot="footer" class="dialog-footer">
          <el-button type="primary" @click="delateSure()">确 定</el-button>
        </span>
      </el-dialog>
    </div>
  </div>
</template>

<script>
import { mycourses, ykCourseCodeadd } from "../../api/index";
export default {
  props: {},
  data() {
    return {
      userid: "",
      array: [],
      loading: true,
      modelDelate: false,
      jihuoma: ""
    };
  },
  computed: {},
  created() {},
  mounted() {
    if (localStorage.getItem("YKuserid")) {
      this.userid = localStorage.getItem("YKuserid");
      this.post();
      this.$parent.activeItem();
      if (this.$route.params.c == "1") {
        this.jihuo();
      }
    } else {
      this.$message({
        type: "info",
        message: res.data.msg
      });
      this.$router.push({
        name:'home'
      })
    }
  },
  watch: {},
  methods: {
    post() {
      let msg = {
        id: this.userid
      };
      mycourses(this.qs(msg))
        .then(res => {
          this.loading = false;
          if (res.data.code == 0) {
            this.array = res.data.courses;
          }
        })
        .catch(e => {});
    },
    //视频列表
    toDetail(id) {
      this.$router.push({
        name: "keList",
        params: {
          id: id
        }
      });
      document.body.scrollTop = 0;
      document.documentElement.scrollTop = 0;
    },
    jihuo() {
      this.modelDelate = true;
    },
    delateSure() {
      let msg = {
        userId: this.userid,
        code: this.jihuoma
      };
      ykCourseCodeadd(this.qs(msg))
        .then(res => {
          this.$message({
            type: "info",
            message: res.data.msg
          });
          if (res.data.code == 0) {
            this.post();
            this.modelDelate = false;
          }
        })
        .catch(e => {});
    }
  },
  components: {}
};
</script>

<style scoped>
.kecheng {
  width: 100%;
  
}
.detail_a {
  justify-content: space-between;
  margin-left: 25px;
  margin-right: 24px;
  border-bottom: 1px solid #57595e;
}
.detail_a > p:nth-child(1) {
  font-size: 18px;
  height: 48px;
  line-height:64px;
  font-weight: bold;
  color: #c9a650;
}
.detail_a > p:nth-child(2) {
  width: 79px;
  height: 30px;
  background: #c9a650;
  border-radius: 4px;
  font-size: 14px;
  color: #25272f !important;
  line-height: 30px;
  border-radius: 30px;
  text-align: center;
  cursor: pointer;
}
.kechengList {
  padding-left: 25px;
  padding-right: 0px;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  padding-bottom: 30px;
}
li {
  margin-right: 58px;
  margin-top: 28px;
  cursor: pointer;
}
li:nth-child(3n) {
  margin-right: 0px !important;
}
li > img {
  width: 288px;
  height: auto;
}
li > p {
  font-size: 16px;
  margin-top: 5px;
  color: rgba(51, 51, 51, 1);
  text-align: center;
}
.modal_delate >>> .el-dialog {
  border-radius: 10px !important;
  margin-top: 297px !important;
}
.modal_delate >>> .el-dialog__header {
  height: 38px;
  background: rgba(253, 224, 225, 1);
  border-radius: 10px 10px 0px 0px;
  padding: 0 !important;
  display: flex;
  align-items: center;
}
.modal_delate >>> .el-dialog__headerbtn {
  top: 10px !important;
}
.modal_delate >>> .el-dialog__title {
  font-size: 14px !important;
  color: rgba(51, 51, 51, 1) !important;
  margin-left: 18px;
}
.delate_con > input {
  font-size: 14px !important;
  color: rgba(51, 51, 51, 1) !important;
  width: 275px;
  height: 40px;
  background: rgba(255, 255, 255, 1);
  border: 1px solid rgba(153, 153, 153, 1);
  border-radius: 3px;
  padding-left: 18px;
}
.modal_delate >>> .el-dialog__body {
  text-align: center !important;
  padding: 41px 0 !important;
}
.modal_delate >>> .el-dialog__footer {
  padding: 0px 32px 26px 32px !important;
}
.modal_delate >>> .dialog-footer {
  display: block !important;
  width: 100% !important;
  display: flex !important;
  justify-content: space-between !important;
}
.modal_delate >>> .dialog-footer > button {
  height: 40px !important;
  border-radius: 3px !important;
  color: rgba(51, 51, 51, 1) !important;
  background-color: rgba(237, 237, 237, 1) !important;
  border-color: rgba(153, 153, 153, 1) !important;
  font-size: 16px !important;
}
.modal_delate >>> .dialog-footer > button {
  width: 83px !important;
  margin: 0 auto;
}
</style>
